<template>
	<view class="app-user-wallet-currency e-p-l-20 e-p-r-20 e-p-t-20" :style="[AppSkinVar]">
		<view class="app-user-wallet-currency__header e-flex-y bg-white e-m-b-20">
			<view class="app-user-wallet-currency__header-top e-flex e-p-t-40">
				<view class="text-center e-flex-2" @tap="$goTo('/pages/user/wallet/details', { id, type: 'N', isFrozen: '0' })">
					<view class="e-m-b-14">
						<text class="e-font-44 fw-500 c-primary">{{ account ? account.money : 0 }}</text>
					</view>
					<view class="e-flex-xy-center">
						<text>{{ account ? account.name : '' }} {{ $t('user.余额') }}</text>
						<view class="e-m-l-8 e-flex">
							<app-image src="classify/arrow-right.png" size="32rpx"></app-image>
						</view>
					</view>
				</view>
				<view class="text-center e-flex-2" @tap="$goTo('/pages/user/wallet/details', { id, type: 'N', isFrozen: '1' })">
					<view class="e-m-b-14">
						<text class="e-font-44 fw-500 c-primary">{{ account ? account.frozenMoney : 0 }}</text>
					</view>
					<view class="e-flex-xy-center">
						<text>{{ $t('user.冻结') }} {{ account ? account.name : '' }}</text>
						<view class="e-m-l-8 e-flex">
							<app-image src="classify/arrow-right.png" size="32rpx"></app-image>
						</view>
						
					</view>
				</view>
			</view>
			<view class="e-flex-xy-center">
				<view class="app-user-wallet-currency__header-button e-flex-4 text-center" @tap="$goTo('/pages/user/wallet/transfer', { id })" v-if="rule.turn">
					<view class="app-user-wallet-currency__header-button__icon" :style="[backgroundColor]">
						<text class="iconfont icon-zhuanzhang e-font-40 c-primary"></text>
					</view>
					<text>{{ $t('user.转账') }}</text>
				</view>
				<!-- <view class="app-user-wallet-currency__header-button e-flex-4 text-center " @tap="$goTo('/pages/user/wallet/release',{id})">
					<view class="app-user-wallet-currency__header-button__icon" :style="[backgroundColor]">
						<text class="iconfont icon-shifang e-font-40 c-primary"></text>
					</view>
					<text>{{$t('user.释放')}}</text>
				</view> -->
				<view class="app-user-wallet-currency__header-button e-flex-4 text-center" @tap="$goTo('/pages/user/wallet/transform', { id })" v-if="rule.convert">
					<view class="app-user-wallet-currency__header-button__icon" :style="[backgroundColor]">
						<text class="iconfont icon-zhuanhuan e-font-40 c-primary"></text>
					</view>
					<text>{{ $t('user.转换') }}</text>
				</view>
			</view>
		</view>
		<view
			class="app-user-wallet-currency__navigator e-m-b-20 bg-white e-p-l-30 e-p-r-30 e-flex e-flex-between"
			@tap="$goTo('/pages/user/wallet/details', { id, type: 'N', isFrozen: '0' })"
		>
			<view class="e-flex">
				<image class="img-32 e-m-r-10" src="/pages/user/static/icon3.png"></image>
				<text class="e-font-26">{{ $t('user.账户明细') }}</text>
			</view>
			<view class="e-flex">
				<text class="c-regular e-font-24">{{ $t('layout.查看全部') }}</text>
				<view class="e-m-l-6 e-flex">
					<app-image src="classify/arrow-right.png" size="36rpx"></app-image>
				</view>
			</view>
		</view>
		<view :class="[buttonShow ? 'app-user-wallet-currency__list1' : 'app-user-wallet-currency__list2']">
			<scroll-view scroll-y @scrolltolower="handleQueryPage()" lower-threshold="60">
				<empty paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="isEmpty"></empty>
				<template v-else>
					<recordCard v-for="item in list" :infoSymbol="item.isout == 1" :status="item.isout == 0" :key="item.id" :info="item"></recordCard>
					<load-more v-if="list.length" :showLoad="showLoad"></load-more>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { getFundDetailsList, getWalletRule } from '@/common/request/api';
import recordCard from './child/record-card.vue';
import { useUser, useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { onLoad, onReady } from '@dcloudio/uni-app';
import { useI18n } from 'vue-i18n';

const props = defineProps({
	id: String
});

const ctx = useCurrentInstance();
const { t } = useI18n();

const userStores = useUser();
const { accountList } = storeToRefs(userStores);
const { AppSkin } = storeToRefs(useInit());

const rule = ref({
	turn: false,
	convert: false
});

const { showLoad, isEmpty, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: getFundDetailsList,
	option: {
		params: {
			strategy: props.id
		}
	}
});

const account = computed(() => accountList.value.find((item) => item.strategy === props.id));

const backgroundColor = computed(() => AppSkin.value.primary.replace('1)', '.1)'));

const buttonShow = computed(() => rule.value.turn || rule.value.convert);

watch(
	account,
	(v) => {
		if (v?.name) {
			uni.setNavigationBarTitle({
				title: v.name + t('user.账户')
			});
		}
	},
	{
		immediate: true
	}
);

onReady(() => {
	if (account.value?.name) {
		uni.setNavigationBarTitle({
			title: account.value + t('user.账户')
		});
	}
});

onLoad(() => {
	getWalletRule(props.id!).then((res) => {
		rule.value = res;
	});
	handleRefresh();
	userStores.getAccountList();
});
</script>
<style lang="scss" scoped>
@include appBem_b(user-wallet-currency) {
	@include appBem_e(header) {
		border-radius: 20rpx;
		&-top{
			height:198rpx
		}
		&-button {
			height: 184rpx;
			padding: 20rpx 0;

			&__icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 200rpx;
				border: 2rpx solid var(--color-primary);
				margin: 0 auto 16rpx auto;
				line-height: 80rpx;
			}
		}
	}
	@include appBem_e(navigator) {
		height: 100rpx;
	}
	@include appBem_e(list1) {
		height: calc(100vh - 542rpx);
		scroll-view {
			height: 100%;
		}
	}

	@include appBem_e(list2) {
		height: calc(100vh - 358rpx);
		scroll-view {
			height: 100%;
		}
	}
}
</style>
